<nz-page-header nzGhost="false">
    <nz-page-header-title>配置项管理</nz-page-header-title>
    <nz-page-header-subtitle>Materal-ConfigCenter</nz-page-header-subtitle>
    <nz-page-header-extra>
        <nz-button-group>
            <button nz-button disabled (click)="openCopyConfigServer(null)" title="复制配置服务"><i nz-icon nzType="logout"></i></button>
            <button nz-button [disabled]="dataLoading || !selectedNamespace" (click)="openDrawer(null)" title="新增配置项"><i nz-icon nzType="plus"></i></button>
        </nz-button-group>
    </nz-page-header-extra>
    <nz-page-header-content>
        <form nz-form [formGroup]="searchModel" autocomplete="off">
            <div nz-row nzGutter="24">
                <nz-form-item nz-col nzSpan="6" *ngIf="configServers.length > 0">
                    <nz-form-control>
                        <nz-select formControlName="configServer" nzPlaceHolder="目标环境" (ngModelChange)="onChangeConfigServer()">
                            <nz-option *ngFor="let item of configServers" [nzValue]="item" [nzLabel]="item.Name"></nz-option>
                        </nz-select>
                        <p class="config-server-url">{{searchModel.value.configServer.Address}}</p>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="6">
                    <nz-form-control>
                        <input type="search" nz-input placeholder="键" formControlName="key" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="6">
                    <nz-form-control>
                        <input type="search" nz-input placeholder="描述" formControlName="description" />
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item nz-col nzSpan="2">
                    <nz-form-control>
                        <button nz-button [disabled]="dataLoading || !selectedNamespace" nzType="primary" (click)="search()" title="查询"><i nz-icon nzType="search"></i></button>
                    </nz-form-control>
                </nz-form-item>
            </div>
        </form>
    </nz-page-header-content>
</nz-page-header>
<div nz-row>
    <div nz-col nzSpan="5">
        <nz-collapse nzAccordion="true">
            <nz-collapse-panel *ngFor="let data of projectData" [nzDisabled]="dataLoading" [title]="data.Name+'['+data.Description+']'" [nzHeader]="projectItem" (nzActiveChange)="onProjectActiveChange($event, data)">
                <ng-template #projectItem>
                    <span class="ellipsis projectItem">{{data.Name}}[{{data.Description}}]</span>                    
                </ng-template>
                <nz-radio-group class="namespace-list" *ngIf="this.namespaceData[data.ID]" [(ngModel)]="selectedNamespace" (ngModelChange)="selectNamespace()">
                    <nz-list [nzDataSource]="this.namespaceData[data.ID]" [nzRenderItem]="namespaceItem">
                        <ng-template #namespaceItem let-item>
                            <nz-list-item class="list-item">
                                <label class="ellipsis list-item-namespace-name" nz-radio [nzValue]="item" [title]="item.Name+'['+item.Description+']'"><span>{{item.Name}}[{{item.Description}}]</span></label>
                                <button class="list-item-button" nz-button (click)="openCopyConfigServer(item)" title="复制命名空间"><i nz-icon nzType="logout"></i></button>
                            </nz-list-item>
                        </ng-template>
                    </nz-list>
                </nz-radio-group>
            </nz-collapse-panel>
        </nz-collapse>
    </div>
    <div nz-col nzSpan="19">
        <nz-table #filterTable nzFrontPagination="false" [nzData]="tableData" [nzLoading]="dataLoading">
            <thead>
                <tr>
                    <th nzWidth="200px">键</th>
                    <th>值</th>
                    <th nzWidth="250px">描述</th>
                    <th nzWidth="100px">操作</th>
                </tr>
            </thead>
            <tbody>
                <tr *ngFor="let data of tableData">
                    <td>{{ data.Key }}</td>
                    <td>{{ data.Value }}</td>
                    <td>{{ data.Description }}</td>
                    <td>
                        <nz-button-group>
                            <button nz-button (click)="openDrawer(data.ID)" title="编辑"><i nz-icon nzType="edit"></i></button>
                            <button nz-button nzType="danger" title="删除" nz-popconfirm nzPopconfirmTitle="确认删除该配置项吗？" nzPopconfirmPlacement="top" (nzOnConfirm)="deleteConfigurationItem(data.ID)"><i nz-icon nzType="delete"></i></button>
                        </nz-button-group>
                    </td>
                </tr>
            </tbody>
        </nz-table>
    </div>
</div>
<nz-drawer [nzWidth]="720" [nzVisible]="drawerVisible" [nzTitle]="isAdd?'添加配置项':'修改配置项'" (nzOnClose)="closeDrawer()">
    <app-configuration-item-edit *ngIf="searchModel.value.configServer" #configurationItemEditComponent [project]="selectedProject" [namespace]="selectedNamespace" [address]="searchModel.value.configServer.Address" (saveEnd)="saveEnd($event)"></app-configuration-item-edit>
</nz-drawer>
<nz-modal *ngIf="searchModel.value.configServer" [(nzVisible)]="isCopyConfigServerModalVisible" nzTitle="复制配置服务" [nzOkDisabled]="!canCopyConfigServer" (nzOnCancel)="cancelCopyConfigServer()" (nzOnOk)="copyConfigServer()">
    <div nz-row>
        <div nz-col nzSpan="12">
            复制<span style="color: red;">{{searchModel.value.configServer.Name}}</span>配置服务中所有配置项到
        </div>
        <div nz-col nzSpan="12">
            <nz-checkbox-group [(ngModel)]="checkConfigServers" (ngModelChange)="selectCopyConfigServer()"></nz-checkbox-group>
        </div>
    </div>
</nz-modal>